<template>
  <view viewport>
    <view class="wrap">
      <view class="card">
        <view class="column_container">
          <view class="row_container">
            <image class="title_icon" src="../../static/images/icon_work_time.png"></image>
            <view class="common_title_bold">日报时间</view>
            <view class="date">{{data.fullDate}} </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">今日完成工作</view>
          </view>
          <view class="text_container">
            <textarea v-model="dataDetail.content" placeholder="暂无内容" disabled></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">明日工作计划</view>
          </view>
          <view class="text_container">
            <textarea v-model="dataDetail.nextDayPlan" placeholder="暂无内容" disabled></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">需要协调与帮助</view>
          </view>
          <view class="text_container">
            <textarea v-model="dataDetail.coordinateHelp" placeholder="暂无内容" disabled></textarea>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">附件</view>

          </view>
          <!--动态表单-->
          <view class="file_container">
            <view v-if="fileList.length>0" class="row_container_between" v-for="(item,index) in fileList" :key="index"
              @click="previewFile(item)">
              <image class="file" src="../../static/images/icon_file_img.png"></image>
            </view>
            <view class="none" v-else>暂无附件</view>
          </view>
        </view>
        <view class="column_container">
          <view class="row_container">
            <view class="line_vertical"></view>
            <view class="common_title">所在位置</view>
          </view>
          <view class="column_container">
            <view class="row_container">
              <input class="input" v-model="dataDetail.loc" placeholder="请选择位置" disabled />
            </view>
          </view>

        </view>

      </view>

    </view>

  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { fileItem } from '@/types/files'
  import { queryClDailyPage } from '@/services/plan'
  import { onLoad } from '@dcloudio/uni-app'
  import { useMemberStore } from '@/stores'
  import { reginDetail } from '@/utils/location'
  import { getFileType, uploadFilePromise } from '@/utils/upload'
  import { getEmployeePageByCode } from '@/services/system'

  const query = defineProps<{
    data : string
  }>()
  const userInfo = useMemberStore().getUserInfo()

  //页面参数
  type dataIntent = {
    planCode : string
    fullDate : string
    employeeCode : string
    employeeName : string

  }
  //数据源
  type dataDetail = {
    attachIds : string
    attachUrls : string
    content : string
    coordinateHelp : string
    nextDayPlan : string
    loc : string
    gmtCreate : string
    gmtModified : string
    dataState : string
    dailyId : string
    dailyCode : string


  }
  //数据
  const dataDetail = ref<dataDetail>({
    attachIds: '',
    attachUrls: '',
    content: '',
    loc: '',
    gmtCreate: '',
    gmtModified: '',
    dataState: '',
    dailyId: '',
    dailyCode: '',
    coordinateHelp: '',
    nextDayPlan: ''
  })

  //附件列表
  const fileList = ref<string[]>([])

  const data = ref<dataIntent>({
    planCode: '',
    fullDate: '',
    employeeCode: '',
    employeeName: ''
  })
  //初始化
  onLoad(() => {
    console.log(query.data)
    data.value = JSON.parse(query.data)
    console.log(data.value)
    if (data.value.employeeName) {
      uni.setNavigationBarTitle({
        title: data.value.employeeName
      })
    }

    getEmployeePageByCode(data.value.employeeCode).then((res : any) => {
      console.log(res)
      if (res && res.userCode) {
        //获取日报数据
        queryClDailyPage({
          userCode: res.userCode,
          // planCode: data.value.planCode,
          reportDate: data.value.fullDate
        }).then((res : any) => {
          console.log(res)
          if (res && res.list) {
            dataDetail.value = res.list[0]

            fileList.value = dataDetail.value.attachIds.split(',')
          }
        })
      }
    })

  })


  //预览
  const previewFile = (item : any) => {
    console.log(item)
    const type = getFileType(item)
    console.log(type)
    uni.navigateTo({
      url: `/pagesMember/mediaPreview/mediaPreview?data=${JSON.stringify({
        fileCtype: type,
        fileUrl: item,
        fileCode: ''
      })}`
    })
  }
</script>

<style lang="scss">
  page {
    background-color: #F9FAFB;
  }

  .viewport {
    display: flex;
  }

  .wrap {
    padding-bottom: 140rpx;
  }

  .card {
    margin: 40rpx 20rpx;
    background: #FFFFFF;
    display: flex;
    padding: 24rpx;
    flex-direction: column;
    // box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .column_container {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    margin-left: 5rpx;
    display: flex;
    flex-direction: column;
  }

  .file_container {
    margin-top: 32rpx;
  }


  .row_container {
    margin-left: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .row_container_end {
    margin-right: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
  }

  .row_container_between {
    margin-right: 5rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
  }

  .input {
    flex-grow: 1;
    color: #888E98;
    font-size: 30rpx;
  }

  .line_vertical {
    width: 8rpx;
    height: 30rpx;
    margin-right: 10rpx;
    background: linear-gradient(180deg, #61D7ED 0%, #54B9CC 100%);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
  }

  .row_container_title {
    font-size: 28rpx;
    color: #1C253A
  }

  .row_container_content {
    font-size: 28rpx;
    margin-left: 15rpx;
    color: #394259
  }

  .add {
    width: 55rpx;
    height: 55rpx;
    // transform: translateX(400px);
    // filter: drop-shadow(#54B9CC -400px 0);
  }

  .title_icon {
    width: 60rpx;
    height: 60rpx;
  }

  .file {
    width: 100rpx;
    height: 100rpx;
  }

  .add_text {
    margin-left: 10rpx;
    height: 44rpx;
    font-size: 30rpx;
    color: #54B9CC;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .add_text_plus {
    margin-left: 15rpx;
    height: 44rpx;
    font-size: 44rpx;
    color: #54B9CC;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .line {
    background-color: #F2F3F5;
    height: 1rpx;
  }

  .row_container_content_red {
    font-size: 28rpx;
    margin-left: 15rpx;
    color: #E02020
  }

  .title_left {
    height: 48rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #1C253A;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .common_title {
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: black;
  }

  .common_title_bold {
    height: 48rpx;
    line-height: 48rpx;
    font-size: 32rpx;
    color: #1C253A;
    font-weight: bold;
  }

  .date {
    margin-left: 20rpx;
    height: 48rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #888E98;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }


  .bottom-contianer {
    position: fixed;
    bottom: 40rpx;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: row;
  }

  .button {
    width: 80%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }



  .text_container {
    background: #FFFFFF;
    height: 216rpx;
    width: 100%;
    padding: 16rpx;
    margin-top: 16rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #f5f6fB;
    font-size: 30rpx;
    color: #888E98
  }

  .none {
    margin-left: 20rpx;
    height: 48rpx;
    font-size: 30rpx;
    color: #888E98;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
</style>
